var aMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
window.onload = function () {
	//第一步：确定这个月1号是星期几？
	//第二步：确定这个月总共有多少天？确定上个月有多少天
	var oCalendar = document.getElementById('calendar'),
		oBtnPre	  = document.getElementById('btnPre'),
		oBtnNext  = document.getElementById('btnNext'),
		oTime     = document.getElementById('time'),
		aSpan     = oTime.getElementsByTagName('span'),
		aSelect     = oTime.getElementsByTagName('select'),
		aTd       = oCalendar.getElementsByTagName('td');
	//获取当前时间
	var curDate = new Date(),
		iyear   = curDate.getFullYear(),
		iMonth  = curDate.getMonth(),
		iDay    = curDate.getDate();

	//点击下拉框设置时间
	for (var i = 0; i < aSpan.length; i++) {
		aSpan[i].index = i;
		aSpan[i].onclick = function () {
			var iIndex = this.index;
			aSelect[iIndex].style.display = 'block';
			aSelect[iIndex].onchange = function () {
				if (iIndex == 0) {
					iyear = Number(this.value);
				} else {
					iMonth = Number(this.value);
				}
				this.style.display = 'none';
				loadDate();
			}
		}
	}
	//创建select下拉框内容
	createOption();
	//初始化时间
	loadDate();
	function loadDate() {
		var oYearNum = document.getElementById('yearNum');
		var oMonthNum = document.getElementById('monthNum');
		oYearNum.innerHTML = iyear;
		oMonthNum.innerHTML = iMonth + 1;
		//确定这个月1号是星期几？
		var iWeek   = new Date(iyear, iMonth, 1).getDay();

		//获取当月总共有多少天
		var iCurDays = getMonthDays(iyear, iMonth);

		//获取上个月总共有多少天
		var iPreDays = getMonthDays(iyear, iMonth - 1);

		//声明一个数组用来存放数据
		var aData = [];

		//把所有的td的样式都清除掉
		for(var i = 0; i < aTd.length; i++) {
			aTd[i].className = '';
		}

		// 压入上个月数据
		for (var i = iWeek - 2; i >= 0; i--) {
			aData.push('<span>' + (iPreDays - i) + '</span>');
		}

		//压入当月数据
		for (var i = 1; i <= iCurDays; i++) {
			aData.push(i);
			if (iDay == i) {
				aTd[aData.length - 1].className = "active";
			}
		}

		//压入下个月数据
		var iNum = aTd.length - aData.length;
		for (var i = 1; i <= iNum; i++) {
			aData.push('<span>' + i + '</span>');
		}

		//把数据放入td中
		for(var i = 0; i < aData.length; i++) {
			aTd[i].innerHTML = aData[i];
			aTd[i].index = i;
			//给每个人Td加点击事件
			aTd[i].onclick = function () {
				for (var j = 0; j < aTd.length; j++) {
					aTd[j].className = '';
				}
				iDay = this.innerHTML.match(/\d+/);
				if (this.index < iWeek - 1) {
					iMonth--;
					if (iMonth < 0) {
						iMonth = 11;
						iyear--;
					}
					loadDate();
				} else if (this.index > iCurDays + iWeek - 2) {
					iMonth++;
					if (iMonth > 11) {
						iMonth = 0;
						iyear++;
					}
					loadDate();
				} else {
					this.className = 'active';
				}
			}
		}

	}

	//点击左侧按钮实现上个月的切换
	oBtnPre.onclick = function () {
		iMonth--;
		if (iMonth < 0) {
			iMonth = 11;
			iyear--;
		}
		loadDate();
	}
	oBtnNext.onclick = function () {
		iMonth++;
		if (iMonth > 11) {
			iMonth = 0;
			iyear++;
		}
		loadDate();
	}



	//创建select下拉框
	function createOption () {
		//年份下拉框
		for (var i = 1990; i <= 2050; i++) {
			var oOption = document.createElement('option');
			oOption.innerHTML = i + '年';
			oOption.value = i;
			//把年份对应选项修改选中状态
			if (i == iyear) {
				oOption.selected = true;
			}
			aSelect[0].appendChild(oOption);
		}

		//月份下拉框
		for (var i = 0; i < 12; i++) {
			var oOption = document.createElement('option');
			oOption.innerHTML = (i + 1) + '月';
			oOption.value = i;
			aSelect[1].appendChild(oOption);
		}
	}

}
//判断年份是否是闰年(获取每月的天数)
function getMonthDays(y, m) {
	if (m < 0) {
		m = 11;
	}
	if (m > 11) {
		m = 0;
	}
	if (m == 1) {
		return ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) ? 29 : 28;
	} else {
		return aMonthDays[m];
	}
}